<template>
	<view class="add-page">
		<view class="add-lay">
			<view class="scontent-wrap">
				<view class="mic-btn" @click.stop="micClick">
					<uni-icons type="mic-filled" size="20" color="#999999"></uni-icons>
				</view>
				<textarea v-model="schData.schContent" class="scontent" :maxlength="200" placeholder="请输入||语音录入 日程内容"/>
			</view>
		</view>
		<view class="add-lay">
			<view class="sel-row">
				<hTimePicker ref="sdatep" class="sdate" :sDay="sDay" :dayNum="dayNum" interval="5" @changeTime="changeSTime" @cancelTime="cancelSTime">
					<view slot="pCon">
						<view class="title">开始时间</view>
						<view class="rightText">
							<text class="sel-text">{{sDateTime[0]}}</text>
							<view class="tborder"></view>
							<text class="sel-text">{{sDateTime[1]}}</text>
							<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
						</view>
			
					</view>
				</hTimePicker>
			</view>
			<view class="sel-row">
				<hTimePicker ref="edatep" class="sdate" :sDay="sDay" :dayNum="dayNum" interval="5" @changeTime="changeETime" @cancelTime="cancelETime">
					<view slot="pCon">
						
						<text class="title">结束时间</text>
						<view class="rightText">
							<text class="sel-text">{{eDateTime[0]}}</text>
							<view class="tborder"></view>
							<text class="sel-text">{{eDateTime[1]}}</text>
							<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
						</view>
					</view>
				</hTimePicker>
			</view>
		</view>
		<view class="sel-row" @click="openTxPop">
			<view class="title">
				提醒
			</view>
			<view class="sel-text">
				<text>{{txArray[schData.remindFlag + 1].text}}</text>
				<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
			</view>
		</view>
		<view class="sel-row" @click="openCfPop">
			<view class="title">
				重复
			</view>
			<view class="sel-text">
				<text>{{cfArray[schData.repeatFlag].text}}</text>
				<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
			</view>
		</view>
		<view class="sel-row" v-if="schData.repeatFlag != 0" @click="openCfendPop">
			<view class="title">
				结束重复
			</view>
			<view class="sel-text">
				<text>{{cfendArray[repeatEndFlag].text}}</text>
				<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
			</view>
		</view>
		<view class="sel-row">
			<view class="title">共享</view>
			<view class="sel-text">
				<switch :checked="schData.shareFlag === 1" @change="switch1Change" />
			</view>
		</view>
		<!-- <view class="file-row">
			<view class="title">图片</view>
			<sunui-upimg @change="getImageInfo1" ref="upimg1" :upimg_preview="schData.fileImgUrls" ></sunui-upimg>
		</view>
		<view class="file-row">
			<view class="title">PDF</view>
			<l-file ref="lFile" @up-success="onSuccess"></l-file>
			<view class="flex flex-align-center flex-pack-justify" >
			// 动态创建input标签 
			<view class="addBox" @tap="onUpload">
				<uni-icons type="cloud-upload" size="50" color="#5C5C5C" class="iconstyle"></uni-icons>
				<view class="uploadtitle">点击上传文件</view>
			</view>
		 
			// 上传的文件列表展示 
			<view class="filesBox" v-if="schData.filePdfUrls.length > 0">
				<view class="fileslist" v-for="(item,index) in schData.filePdfUrls" :key="index">
					<uni-icons type="paperclip" size="20" class="upfileico"></uni-icons>
					<text class="upname rf-ellipsis" @click="onOpenDoc(item.url)">{{item.name}}</text>
					<uni-icons type="clear" size="22" class="upclose" @click="delUpFile(item,index)" color="#e54d42"></uni-icons>
				</view> 
			</view>
			</view>
		</view> -->
		<view class="add-lay">
			<view class="xz-row">
				<view class="title">协作人</view>
				<view style="float: right;width: 85%;height: 30px;"  @click="openApprover" v-if="approver.length < 50">
					<view class="sel-text" style="float: right;">
						<uni-icons type="arrowright" size="15" color="#999999"></uni-icons>
					</view>
				</view>
				
			</view>
			<view class="xzr-list">
				<view class="xzr-item" v-for="(v, i) in approver" :key="i">
					<view class="xzr-del" @click="removeApprover(i)">
						<uni-icons type="closeempty" size="13" color="#ffffff"></uni-icons>
					</view>
					<text class="xzr-text">{{v.auditor_name}}</text>
					<view class="all-xzr-text">{{v.name}}</view>
				</view>
				
			</view>
		</view>

		
		<uni-popup ref="txpopup" type="bottom">
			<view class="popup-sel">
				<view class="title">提醒<view class="pop-close" @click="popClose(0)">取消</view></view>
				<view class="sel-item" :class="{disabled: v.disabled}" v-for="(v, i) in txArray" :key="i" @click="txSelClick(v)">{{v.text}}</view>
				<view class="sel-tip">提醒时间不能超过当前时间</view>
			</view>
		</uni-popup>
		<uni-popup ref="cfpopup" type="bottom">
			<view class="popup-sel">
				<view class="title">重复<view class="pop-close" @click="popClose(1)">取消</view></view>
				<view class="sel-item" v-for="(v, i) in cfArray" :key="i" @click="cfSelClick(v)">{{v.text}}</view>
			</view>
		</uni-popup>
		<uni-popup ref="cfendpopup" type="bottom">
			<view class="popup-sel">
				<view class="title">重复截止<view class="pop-close" @click="popClose(2)">取消</view></view>
				<view class="sel-item" v-for="(v, i) in cfendArray" :key="i" @click="cfendSelClick(v)">{{v.text}}</view>
			</view>
		</uni-popup>
		
		<mx-date-picker :show="showPicker" :type="timeType" :value="value" @confirm="onSelected" @cancel="showPicker = false" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue'
	import hTimePicker from "@/components/h-timePicker/h-timePicker.vue"
	// import { dateFormat, diffTime } from '@/common/util.js'
	// import { editSchedule, detailSchedule, fileDelete} from '@/api/schedule/api.js'
	// import lFile from '@/components/l-file/l-file.vue'
	const MAXDATE = `${(new Date()).getFullYear() + 10}/12/31`
	
	export default {
		components: { MxDatePicker, uniIcons, uniPopup, sunUiUpimg, hTimePicker },
		data() {
			return {
				showPicker: false,
				sDateTime: ['', ''],
				eDateTime: ['', ''],
				value: '',
				txArray: [
					{text: '不提醒', value: -1, disabled: false},
					{text: '日程开始时', value: 0, disabled: false},
					{text: '提前5分钟', value: 1, disabled: false},
					{text: '提前15分钟', value: 2, disabled: false},
					{text: '提前30分钟', value: 3, disabled: false},
					{text: '提前一小时', value: 4, disabled: false},
					{text: '提前一天', value: 5, disabled: false}
				],
				cfArray: [
					{text: '一次性日程', value: 0, disabled: false},
					{text: '每工作日', value: 1, disabled: false},
					{text: '每日', value: 2, disabled: false},
					{text: '每周', value: 3, disabled: false},
					{text: '每两周', value: 4, disabled: false},
					{text: '每月', value: 5, disabled: false},
					{text: '每年', value: 6, disabled: false}
				],
				cfendArray: [
					{text: '从不', value: 0},
					{text: '时间', value: 1}
				],
				repeatEndFlag: 0,
				schData: {
					schItemId: '',
					isRel: 0,
					isColl: 0,
					schContent: '',
					startTime: '',
					endTime: '',
					remindFlag: 0,
					repeatFlag: 0,
					repeatEndtime: '',
					shareFlag: 0,
					schCollEmployNos: '',
					filePdfUrls:[],
					fileImgUrls:[],
					fileUrls: []
				},
				selTimeType: 0,
				timeType: 'datetime',
				approver: [],
				approverId: [],
				pkid: '',
				fileImgUrls: [],
				filePdfUrls: [],
				sDay: 0,
				dayNum: 0,
				initRepeatFlag: 0,
				initStartTime: '',
				initEndTime: '',
				initRepeatEndtime: ''
			}
		},
		onLoad(option) {
			if (option.pkid) {
				this.pkid = option.pkid
				let _pkid = {pkid:this.pkid}
				this.$u.api.scheduleDetail(_pkid).then(res => {
					let _sTime = new Date(res.startTime)
					let _eTime = new Date(res.endTime)
					
					let _cnow = new Date(this.$u.timeFormat(new Date(), 'yyyy/mm/dd'))
					let _mnow = new Date(this.$u.timeFormat(_sTime, 'yyyy/mm/dd'))
					let _min_date = new Date(`${_mnow.getFullYear() - 1}/01/01`)
					let _max_date = new Date(`${_mnow.getFullYear() + 1}/01/31`)
					this.sDay = (_min_date - _cnow)/1000/60/60/24
					this.dayNum = (_max_date - _min_date)/1000/60/60/24
					
					this.$refs.sdatep.pickerTap(this.sDay, this.dayNum)
					this.$refs.edatep.pickerTap(this.sDay, this.dayNum)
					
					res.schContent = decodeURIComponent(res.schContent)
					// this.schData = res
					this.schData.schItemId = res.pkid
					this.schData.isRel = 0
					this.schData.isColl = res.isColl
					this.schData.schContent = res.schContent
					this.schData.startTime = res.startTime
					this.schData.endTime = res.endTime
					this.schData.remindFlag = res.remindFlag - 0
					this.schData.repeatFlag = res.repeatFlag
					res.repeatEndtime= res.repeatEndtime
					this.schData.repeatEndtime = res.repeatEndtime
					
					this.schData.shareFlag = res.shareFlag
					this.schData.schCollEmployNos = res.schCollEmployNos
					// this.schData.fileUrls = res.fileUrls
					this.schData.fileImgUrls = res.fileImgUrls
					this.schData.filePdfUrls = res.filePdfUrls
					
					this.initStartTime = res.startTime
					this.initEndTime = res.endTime
					this.initRepeatFlag = res.repeatFlag - 0
					if (res.repeatEndtime) {
						this.initRepeatEndtime = res.repeatEndtime
					}
					
					if (res.repeatFlag !== 0) {
						let _max = new Date(MAXDATE)
						if (res.repeatEndtime !== (_max- 0)) {
							this.cfendArray[1].text = this.$u.timeFormat(new Date(res.repeatEndtime), 'yyyy年mm月dd日 周W')
							this.repeatEndFlag  = 1
					
						}
						// this.value = res.repeatEndtime
					}
					
					this.sDateTime = []
					this.sDateTime.push(this.$u.timeFormat(_sTime, 'yyyy年mm月dd日'))
					this.sDateTime.push(this.$u.timeFormat(_sTime, '周W hh:MM'))
					this.schData.startTime = this.$u.timeFormat(_sTime, 'yyyy/mm/dd hh:MM')
					
					this.eDateTime = []
					this.eDateTime.push(this.$u.timeFormat(_eTime, 'yyyy年mm月dd日'))
					this.eDateTime.push(this.$u.timeFormat(_eTime, '周W hh:MM'))
					this.schData.endTime = this.$u.timeFormat(_eTime, 'yyyy/mm/dd hh:MM')
					
					this.$refs.sdatep.setDate(new Date(this.schData.startTime))
					this.$refs.edatep.setDate(new Date(this.schData.endTime))
					
					let _files = this.schData.fileUrls
					
					
					this.$nextTick(() => {
						let _arr = []
						this.schData.fileImgUrls.forEach((item, i) => {
							_arr.push({
								path: item.url,
								pkid:item.pkid,
								url:item.url,
								name:item.name
							})
						})
						this.schData.fileImgUrls = _arr
						// console.log('ll',this.schData.fileImgUrls)
					})
					
					if (res.schCollaborators) {
						res.schCollaborators.forEach(v => {
							this.approver.push({auditor_id: v.owner, auditor_name: v.ownerName.charAt(v.ownerName.length - 1), name: v.ownerName})
							this.approverId.push(v.owner)
						})
					}
				}).catch(err => {
					console.error(err)
				})
				// detailSchedule(this.pkid).then(res => {
					
					
				// })
			}
			uni.$on('assist_confirm',(pList)=>{
				this.approver = []
				this.approverId = []
				pList.forEach(v => {
					this.approver.push({auditor_id: v.auther_user_id, auditor_name: v.name.charAt(v.name.length - 1), name: v.name})
					this.approverId.push(v.auther_user_id)
				})
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('assist_confirm')
		},
		onNavigationBarButtonTap() {
			let _titleArr = ['确定修改当前日程吗？', '确定修改所有关联日程吗？']
			let _title = _titleArr[0]
			this.schData.startTime = new Date(this.schData.startTime).getTime()
			this.schData.endTime = new Date(this.schData.endTime).getTime()
			this.schData.schCollEmployNos = this.approverId.join(',')
			
			this.schData.isColl = this.schData.schCollEmployNos.length > 0 ? 1 : 0
			
			if (this.schData.schContent.length === 0) {
				this.$u.toast('请输入日程内容');
			} else {
				
				let imglist = this.schData.fileImgUrls
				let pdflist = this.schData.filePdfUrls
				let urllist = [...imglist,...pdflist]
				for(let i=0;i<urllist.length;i++){
					this.schData.fileUrls.push(urllist[i].pkid)
				}
				
				// this.schData.repeatEndtime = dateFormat(new date(this.schData.repeatEndtime), 'yyyy-MM-DD')
				this.schData.repeatEndtime = this.$u.timeFormat(new Date(this.schData.repeatEndtime), 'yyyy-mm-dd hh:MM:ss')
				console.log('111111',this.schData)
				let _subData = Object.assign({}, this.schData)
				// console.log('222222',_subData.repeatEndtime)
				_subData.schContent = encodeURIComponent(this.schData.schContent)
				
				if (this.initStartTime !== _subData.startTime || this.initEndTime !== _subData.endTime || this.initRepeatFlag !== (_subData.repeatFlag - 0)) {
					_subData.isRel = 1
				}
				// console.log(this.initRepeatEndtime, _subData.repeatEndtime)
				if (this.initRepeatEndtime !== '') {
					let _repeatEndtime = new Date(_subData.repeatEndtime)
					if (this.initRepeatEndtime !== (_repeatEndtime - 0)) {
						_subData.isRel = 1
					}
				}
				
				if (_subData.isRel === 1 && this.initRepeatFlag !== 0) {
					_title = _titleArr[1]
					uni.showModal({
						title: _title,
						content: '',
						success: (res) => {
							if (res.confirm) {
								this.$u.api.scheduleEdit(_subData).then(res => {
									this.$u.toast('编辑成功')
									uni.navigateBack({
										delta: 2
									})
								}).catch(err => {
									console.log(err)
								})
							}
						}
					})
				} else if (this.initRepeatFlag !== 0) {
					uni.showActionSheet({
						itemList: ['仅修改当前日程', '修改所有关联日程'],
						success: (res) => {
							_subData.isRel = res.tapIndex
							uni.showModal({
								title: _titleArr[res.tapIndex],
								content: '',
								success: (res) => {
									if (res.confirm) {
										this.$u.api.scheduleEdit(_subData).then(res => {
											this.$u.toast('编辑成功')
											uni.navigateBack({
												delta: _subData.isRel + 1
											})
										}).catch(err => {
											console.log(err)
										})
									}
								}
							})
						},
						fail: function (res) {
							
						}
					})
				} else {
					uni.showModal({
						title: _title,
						content: '',
						success: (res) => {
							if (res.confirm) {
								this.$u.api.scheduleEdit(_subData).then(res => {
									this.$u.toast('编辑成功')
									uni.navigateBack({
										delta: _subData.isRel + 1
									})
								}).catch(err => {
									console.log(err)
								})
							}
						}
					})
				}
			}
		},
		methods: {
			/* 预览 */
			onOpenDoc(paths) {
				let url = paths
				/* 下载返回临时路径（退出应用失效） */
				this.$refs.lFile.download(url)
				.then(path=>{
					/* 预览 */
					this.$refs.lFile.open(path);
				});
			},
			/* 上传 */
			onUpload() { 
				// 二期用
				// const _token = uni.getStorageSync(config.Global.cache + '_Token');
				// this.$refs.lFile.upload({
				// 	// #ifdef APP-PLUS
				// 	currentWebview: this.$mp.page.$getAppWebview(),
				// 	// #endif
				// 	url: config.Global.BaseUrl + 'mobile/common/file/upload/v2',
				// 	//默认file,上传文件的key
				// 	name: 'file',
				// 	header: {'Authorization': _token},
				// 	fileList:this.schData.filePdfUrls
				// });
			},
			onSuccess(res) {
				let _data = JSON.parse(res.data.id).data
				this.schData.filePdfUrls.push(_data); // 上传成功后放进fileList数组用于展示
			},
			delUpFile(data,idx){
				// 二期用
				// let url =this.schData.filePdfUrls[idx]
				// helper.ajax({
				// 	url: 'mobile/schedule/fileDelete',
				// 	method: 'post',
				// 	data: {url},
				// 	success: res => {
				// 		this.schData.filePdfUrls = this.schData.filePdfUrls.filter(item => item.pkid !== data.pkid)
				// 	}
				// });
			},
			onSelected(e) {
				console.log('2221',e.date)
				if (this.selTimeType === 0) {
					let _now = new Date()
					
					if (_now < e.date) {
						this.sDateTime = []
						this.sDateTime.push(this.$u.timeFormat(e.date, 'yyyy年mm月dd日'))
						this.sDateTime.push(this.$u.timeFormat(e.date, '周W hh:MM'))
						this.schData.startTime = e.value
						
						let _etime = new Date(e.date)
						_etime.setHours(_etime.getHours() + 1)
						this.eDateTime = []
						this.eDateTime.push(this.$u.timeFormat(_etime, 'yyyy年mm月dd日'))
						this.eDateTime.push(this.$u.timeFormat(_etime, '周W hh:MM'))
						this.schData.endTime = this.$u.timeFormat(_etime, 'yyyy/mm/dd hh:MM')
						
					} else {
						this.$u.toast('开始时间不能小于当前时间');
					}
				} else if (this.selTimeType === 1) {
					let _stime = new Date(this.schData.startTime)
					if (_stime < e.date) {
						this.eDateTime = []
						this.eDateTime.push(this.$u.timeFormat(e.date, 'yyyy年mm月dd日'))
						this.eDateTime.push(this.$u.timeFormat(e.date, '周W hh:MM'))
						this.schData.endTime = e.value
					} else {
						uni.showToast({
							title: '结束时间不能小于开始时间',
							icon: 'none'
						})
					}
				} else {
					let _now = new Date(this.schData.startTime)
					if (_now < e.date) {
						this.repeatEndFlag = 1
						this.cfendArray[1].text = this.$u.timeFormat(e.date, 'yyyy年mm月dd日 周W')
						this.schData.repeatEndtime = e.value
					} else {
						this.$u.toast('开始时间不能小于开始时间');
					}
				}
				this.showPicker = false
			},
			openPicker(pType) {
				this.selTimeType = pType
				this.timeType = 'date'
				
				let _max = new Date(MAXDATE)
				this.value = this.schData.repeatEndtime !== (_max - 0) ? this.$u.timeFormat(new Date(this.schData.repeatEndtime), 'yyyy/mm/dd') : this.$u.timeFormat(new Date(), 'yyyy/mm/dd')
				this.showPicker = true
			},
			openTxPop() {
				// txArray				
				let _now = this.$moment()
				let _stime = this.$moment(new Date(this.schData.startTime))
				
				let _diff = _stime.diff(_now, 'minutes')
				
				this.txArray[2].disabled = _diff < 5
				this.txArray[3].disabled = _diff < 15
				this.txArray[4].disabled = _diff < 30
				this.txArray[5].disabled = _diff < 60
				this.txArray[6].disabled = _diff < (24*60)
				this.$refs.txpopup.open()
			},
			openCfPop() {
				this.$refs.cfpopup.open()
			},
			openCfendPop() {
				this.$refs.cfendpopup.open()
			},
			popClose(pType) {
				switch (pType){
					case 0:
						this.$refs.txpopup.close()
						break;
					case 1:
						this.$refs.cfpopup.close()
						break;	
					case 2:
						this.$refs.cfendpopup.close()
						break;
					default:
						break;
				}
			},
			micClick() {
				plus.speech.startRecognize({engine:'iFly', userInterface: false}, (s) => {
					if(this.schData.schContent.length < 200) {
						this.schData.schContent += s
					}
				}, function(e){
					this.$u.toast("语音识别失败："+e.message);
				})
			},
			switch1Change(e) {
				this.schData.shareFlag = e.target.value?1:0
			},
			txSelClick(pData) {
				if (!pData.disabled) {
					this.schData.remindFlag = pData.value
					this.popClose(0)
				}
			},
			cfSelClick(pData) {
				this.schData.repeatFlag = pData.value
				this.popClose(1)
			},
			cfDate(v, n) {
				if (v) {
					let t = new Date(v.getFullYear(), v.getMonth(), v.getDate(), v.getHours(), v.getMinutes(), v.getSeconds(), v.getMilliseconds());
					t.setMonth(v.getMonth() + n);
					if (t.getDate() != v.getDate()) { t.setDate(0); }
					return t;
				}
			},
			cfendSelClick(pData) {
				if (pData.value === 0) {
					this.repeatEndFlag = 0

					// let _date =  this.cfDate(new Date(),1)
					this.schData.repeatEndtime = MAXDATE
					// this.schData.repeatEndtime = _date
					this.cfendArray[1].text = '时间'
				} else {
					this.openPicker(2)
				}
				this.popClose(2)
			},
			getImageInfo1(e) {
				console.log('e',e)
				this.schData.fileImgUrls = []
				for(let i=0;i<e.length;i++){
					this.schData.fileImgUrls.push(e[i])
				}
			},
			openApprover() {
				let _ids = this.approverId.join(',')
				this.$u.route('pages/public/seluser', {eventName: 'assist_confirm', Ids: _ids})
			},
			removeApprover(pI) {
				this.approver.splice(pI,1);
				this.approverId.splice(pI,1);
			},
			changeSTime(str, date){
				// console.log(date)
				let _now = new Date()
				let _date = new Date(date)
				// if (_now < _date) {
					this.sDateTime = []
					this.sDateTime.push(this.$u.timeFormat(_date, 'yyyy年mm月dd日'))
					this.sDateTime.push(this.$u.timeFormat(_date, '周W hh:MM'))
					this.schData.startTime = this.$u.timeFormat(_date, 'yyyy/mm/dd hh:MM')
					
					let _etime = new Date(_date)
					_etime.setHours(_etime.getHours() + 1)
					this.eDateTime = []
					this.eDateTime.push(this.$u.timeFormat(_etime, 'yyyy年mm月dd日'))
					this.eDateTime.push(this.$u.timeFormat(_etime, '周W hh:MM'))
					this.schData.endTime = this.$u.timeFormat(_etime, 'yyyy/mm/dd hh:MM')
					this.$refs.edatep.setDate(new Date(this.schData.endTime))
				// } else {
				// 	this.$refs.sdatep.setDate(new Date(this.schData.startTime))
				// 	rfToast('开始时间不能小于当前时间')
				// }
			},
			changeETime(str, date){
				// console.log(date)
				let _date = new Date(date)
				let _stime = new Date(this.schData.startTime)
				if (_stime < _date) {
					this.eDateTime = []
					this.eDateTime.push(this.$u.timeFormat(_date, 'yyyy年mm月dd日'))
					this.eDateTime.push(this.$u.timeFormat(_date, '周W hh:MM'))
					this.schData.endTime = this.$u.timeFormat(_date, 'yyyy/mm/dd hh:MM')
				} else {
					this.$refs.edatep.setDate(new Date(this.schData.endTime))
					this.$u.toast('结束时间不能小于开始时间');
				}
			},
			cancelSTime() {
				this.$refs.sdatep.setDate(new Date(this.schData.startTime))
			},
			cancelETime() {
				this.$refs.edatep.setDate(new Date(this.schData.endTime))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-page {
		.add-lay {
			background: #ffffff;
			margin-bottom: 10px;
		}
		background: #eeeeee;
		.scontent-wrap {
			position: relative;
			
			.scontent {
				box-sizing: border-box;
				padding: 16px 50px 16px 16px;
				width: 100%;
				height: 120px;
				font-size: 16px;
				border-bottom: 1px solid #eeeeee;
			}
			.mic-btn {
				position: absolute;
				top: 16px;
				right: 16px;
				width: 30px;
				height: 30px;
				line-height: 30px;
				border-radius: 50px;
				text-align: center;
				background-color: #ffffff;
				z-index: 1;
			}
		}
		.sdate {
			 flex: 1;
			 .arrow{
				float: right;
				color: rgb(153, 153, 153);
				font-size: 18px;
			 }
		}
		.sel-row {
			display: flex;
			padding: 16px;
			justify-content: space-between;
			border-bottom: 1px solid #eeeeee;
			background-color: #FFFFFF;
			.title {
				display: inline;
				line-height: 30px;
				font-size: 15px;
			}
			.rightText{
				float: right;
				line-height: 30px;
			}
			.sel-text {
				font-size: 15px;
				color: #999999;
			}
			.date-text {
				display: inline;
				float: right;
				line-height: 32px;
				font-size: 15px;
			}
			.tborder {
				display: inline;
				height: 15px;
				margin: 8px 10px 0 10px;
				width: 1px;
				border-left: 1px #cccccc solid;
				
			}
			.time-text {
				float: right;
				display: inline;
				float: right;
				line-height: 32px;
				font-size: 15px;
			}
		}
		.popup-sel {
			background-color: #FFFFFF;
			.title, .sel-item {
				border-bottom: 1px solid #eeeeee;
			}
			.title {
				padding: 8px 16px;
				font-weight: bold;
				color: #2196f3;
				border-color: #2196f3;
				.pop-close {
					float: right;
					color: #999;
				}
			}
			.sel-item {
				padding: 16px;
				font-size: 18px;
				text-align: center;
			}
			.sel-item:active {
				background-color: #CCCCCC;
			}
			.sel-item.disabled {
				color: #CCCCCC;
			}
			.sel-item.disabled:active {
				background-color: #FFFFFF;
			}
			.sel-tip {
				padding: 8px 16px;
				font-size: 12px;
				text-align: center;
				color: #CCCCCC;
			}
		}
		.xz-row {
			padding: 16px;
			border-bottom: 1px solid #eeeeee;
			background-color: #FFFFFF;
			align-items: center;
			.title {
				display: inline;
				font-size: 15px;
			}
			.sel-text {
				font-size: 15px;
				color: #999999;
			}
			
		}
		.xzr-list {
			margin: 15px 15px;
			width: 100%;
			display: flex;
			flex-wrap:wrap;
			justify-content:flex-start;
			.xzr-item, .xzr-add-btn {
				float: left;
				margin: 8px 8px 20px 8px;
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 50%;
				.xzr-text {
					font-size: 22px;
					font-weight: bold;
					
				}
				.all-xzr-text {
					position: absolute; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width: 40px; bottom: -30px; left: 0; color: #000000;font-size: 10px;
				}
			}
			.xzr-item {
				position: relative;
				color: #FFFFFF;
				background-color: #1890FF;
				.xzr-del {
					position: absolute;
					width: 20px;
					height: 20px;
					line-height: 20px;
					top: -3px;
					right: -5px;
					border-radius: 50%;
					background-color: #cccccc;
				}
			}
			.xzr-add-btn {
				background-color: #cccccc;
			}
			.xzr-add-btn:active {
				background-color:#cccccc;
			}
		}
			
		.file-row {
			margin: 8px 0;
			padding: 16px;
			background-color: #FFFFFF;
			.title {
				font-size: 18px;
				font-weight: bold;
			}
		}
	}
	.addBox{
		width: 100%;
		height: 100px;
		text-align: center;
		// background: url(../../static/img/upload.png) no-repeat center center;		
		position: relative;
		border: 1px dashed #1890FF;
		margin: 0 auto;
		border-radius: 8px;
		background-color: #FAFAFA;
	}
	.iconstyle {
		display: inline-block;
		margin: 0 auto;
		margin-top: 15px;
		text-align: center;
	}
	.uploadtitle{
		position: absolute;
		bottom: 12rpx;
		left: 0;
		right: 0;
	}
	
	.filesBox{
		margin-top: 28rpx;
	}
	
	.fileslist{
		margin-top: 8px;
	}
	
	.upfileico{
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		float: left;
		line-height: 40rpx;
	
		margin-right: 2px;
	}
	
	.upname{
		font-size: 26rpx;
		line-height: 40rpx;
		color: #333333;
		width: 80%;
		display: inline-block;
	}
	
	.upclose{
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		float: right;
	}
</style>
